//通过layui.use 先加载table模块。
layui.use([ 'table', 'layer', 'form' ], function() {
	var table = layui.table;
	var layer = layui.layer;
	var form = layui.form;
	// layui内置了jQuery，要使用jQuery语法，需要显示的将jQuery的$取出。
	var $ = layui.$;

	// 弹出层的下标
	var laryer_index;
	// 对新增按钮绑定事件
	$('#btn_add').on('click', function() {
		// alert('ttt');
		// layer.msg('hello');
		openAddEditPage().done(function() {
			// 通过ajax请求新增页面弹窗后，将form再重新渲染一下，否则有些样式出不来。
			form.render(); // 更新全部
		});
	});

	// 侦听表单提交
	form.on('submit(form_manager_product)', function(data) {
		// layer.msg('侦听表单提交');
		/* console.log(formData); */
		// 使用ajax进行表单提交
		$.ajax({
			type : 'post',
			url : 'manager/product/doAddOrUpdate',
			// data: formData.field,//{stuName: "zhangsan", stuAge: "21",
			// stuSex: "0"}
			data : data.field,
			success : function(result) {
				// console.log("reuslt="+result);
				// 向后台提交数据成功了。
				if (result > 0) {
					// 关闭弹窗框
					layer.close(laryer_index);
					// 如果你想关闭最新弹出的层，直接获取layer.index即可
					// layer.close(layer.index);
					// //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
					// 重新加载table中的数据
					initTableData();
				}
			}
		});
		return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
	/*
	 * form.on('submit(form_search)', function(data) { initTableData(); return
	 * false; })
	 */
	// 当前页面加载完成后，显示的调用初始化table数据的方法。
	initTableData();
	// 初始化table数据
	function initTableData() {
		// 第一个实例
		table.render({
			elem : '#demo',
			height : 312,
			url : 'manager/product/findAllProduct' // 数据接口
			// ,url:'json/table.json'
			,
			where : $('#form_search').serialize(),
			page : true // 开启分页
			,
			cols : [ [ // 表头
			{
				field : 'rowId',
				title : 'ID',
				width : 80,
				sort : true,
				fixed : 'left'
			}, {
				field : 'proName',
				title : '产品名称',
				width : 200
			}, {
				field : 'proPhoto',
				title : '产品图片',
				width : 200,
			}, {
				field : 'proNumber',
				title : '产品数量',
				width : 200,
			}, {
				field : 'info',
				title : '产品描述',
				width : 200,
			}, {
				fixed : 'right',
				title : '操作',
				align : 'center',
				templet : '#operationTpl'
			} ] ]
		});
	}

	// 监听行工具事件
	table.on('tool(filter_table)', function(obj) { // 注：tool 是工具条事件名，test 是
		// table 原始容器的属性
		// lay-filter="对应的值"
		console.log(obj);
		var data = obj.data; // 获得当前行数据
		var layEvent = obj.event; // 获得 lay-event 对应的值
		if (layEvent === 'detail') {
			$.ajax({
				type : 'post',
				url : ' manager/product/changeState',
				data : {
					"rowId" : data.rowId
				},
				success : function(result) {
					if (result == 1) {
						initTableData();
					}
				}
			});
		} else if (layEvent === 'del') {
			layer.confirm('真的删除本商品吗', function(index) {
				var rowId = data.rowId;
				$.ajax({
					type : 'post',
					url : 'manager/product/delete',
					data : {
						"rowId" : rowId
					},
					success : function(result) {
						console.log("result=" + result);
						if (result > 0) {
							// 关闭弹窗
							layer.close(index);
							// 重新加载数据
							initTableData();
						}
					}
				});
				// obj.del(); //删除对应行（tr）的DOM结构
				// layer.close(index);
				// 向服务端发送删除指令
			});
		} else if (layEvent === 'edit') {
			// var rowId = data.rowId;
			// layer.msg(rowId);
			// 调用 openAddEditPage() 方法有返回值，返回的是一个ajax的实例。
			// ajax的done这个方法是响应成功后，调用这个方法
			openAddEditPage().done(function() {
				// layer.msg("ajax的done这个方法是响应成功后，调用这个方法");
				// 对表单赋值
				// {rowId: 4, stuName: "zhaoliu", stuAge: 15, stuSex: 1,
				// activeFlag: 1}
				form.val('manager_product_filter', data);
			    $('#demo1').attr('src',data.proPhoto);
				// data-old="" 显示的向指定的元素中的data-xxx属性进行赋值。将需要修改前的对象的值放入。
				/* $('#userId').data('data-old', data.userId); */
				// 让form表单渲染一下。 form_add_edit = <form
				// lay-filter="student_add_edit_form">
				// form.render(null, 'student_add_edit_form');
				form.render();
			});

		}
	});
	// 监听
	form.on('select(catalog1-filter)', function(data) {
		var parentId = data.value;
		$('#catalog2').empty();
		form.render('select');
		$.ajax({
			type : 'post',
			url : 'manager/product/findCatalogListByParentId',
			data : {
				"parentId" : parentId
			},
			success : function(catalogList) {
				var options = '';
				if (catalogList) {
					$.each(catalogList, function(index, item) {
						options += '<option value="' + item.rowId + '">'
								+ item.catalogName + '</option>';
					});
				}
				$('#catalog2').html(options);
				form.render('select'); // 刷新select选择框渲染
			}
		});

	});

	// 弹出新增&修改页面
	function openAddEditPage() {
		return $.ajax({
			type : 'get',
			url : 'manager/product/goAdd',
			success : function(html) {
				// console.log(html);
				laryer_index = layer.open({
					type : 1,
					title : '员工新增',
					area : [ '800px', '500px' ],
					content : html
				// 注意，如果str是object，那么需要字符拼接。
				});
			}
		});
	}

});